<template>
  <div class="orderIndex">
    <div class="titleBar">
      <div class="backIcon" @click="back">
        <svg t="1593162984672" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1917" width="220" height="220"><path d="M663.466667 889.6l-362.666667-362.666667c-8.533333-8.533333-8.533333-21.333333 0-29.866666l362.666667-362.666667c8.533333-8.533333 21.333333-8.533333 29.866666 0l29.866667 29.866667c8.533333 8.533333 8.533333 21.333333 0 29.866666L422.4 497.066667c-8.533333 8.533333-8.533333 21.333333 0 29.866666l300.8 300.8c8.533333 8.533333 8.533333 21.333333 0 29.866667l-29.866667 29.866667c-8.533333 10.666667-21.333333 10.666667-29.866666 2.133333z" fill="#000000" p-id="1918"></path></svg>
      </div>
      <div class="title">
        确认订单
      </div>
      <div>
        &nbsp;&nbsp;
      </div>
    </div>
    <div class="addressWrap">
      <div class="localIcon"></div>
      <div class="address" @click="jumpToAppAddress">
        <p v-if="!isHaveAddress" class="_placeholder">请选择收货地址</p>
        <div v-else class="addressDetail">
          <div class="user">
            <p>{{name}}</p>
            <span>{{tel}}</span>
          </div>
          <div class="add">
            <p>{{provinceName + cityName + districtName + detail}}</p>
          </div>
        </div>
      </div>
      <div class="rightIcon">

      </div>
    </div>
    <div class="order">
      <div class="orderDetail">
        <div class="goodsImg">
          <img :src="goodsDetail.thumb" alt="">
        </div>
        <div class="goodsInfo">
          <div class="goodsName">{{goodsDetail.title}}</div>
          <div class="desc">{{goodsDetail.desc}}</div>
        </div>
      </div>
      <div class="price">
        <div class="_text">兑换条件</div>
        <div class="_value">{{goodsDetail.price}}颜值</div>
      </div>
    </div>
    <div class="bottomBtn">
      <div class="leftCount">
        <p>总计：</p>
        <p class="_value">{{goodsDetail.price}}颜值</p>
      </div>
      <div class="rightBtn" @click="buyThis">确认兑换</div>
    </div>
  </div>
</template>

<script>
import {judgeEquipment} from '@/utils/utils'
export default {
  data() {
    return {
      goodsDetail: '',
      running: false,
      isHaveAddress: false,
      name: '',
      tel: '',
      provinceName: '',
      cityName: '',
      districtName: '',
      detail: '',
      id: '',
      token: ''
    };
  },
  async mounted () {
    this.id = this.$route.query.id
    this.token = sessionStorage.getItem('token')
    await this.getGoodsDetail()
    await this.getAddress()
    window.WebViewJavascriptBridge.registerHandler('getAppAddress', (data) => {
      let JSONObj = {}
      if (judgeEquipment() === 'android') {
        JSONObj = JSON.parse(data)
      } else if (judgeEquipment() === 'ios') {
        JSONObj = data
      }
      this.isHaveAddress = true
      this.name = JSONObj.name
      this.tel = JSONObj.tel
      this.provinceName = JSONObj.provinceName
      this.cityName = JSONObj.cityName
      this.districtName = JSONObj.districtName
      this.detail = JSONObj.detail
    })
  },
  methods: {
    jumpToAppAddress () {
      window.WebViewJavascriptBridge.callHandler('getAddress',{
        type: this.isHaveAddress ? 1 : 0
      }, () => {
      
      })
    },
    back () {
      this.$router.go(-1)
    },
    async getGoodsDetail () {
      await this.$axios.get("https://kotest.bojem.com/user/goodsDetails", {
        params: {
          id: this.id,
          token: this.token
        }
      })
      .then(res => {
        console.log(res)
        if (res.status === 200) {
          if (res.data.code === '0000') {
            this.goodsDetail = res.data.data
          } else {
            if (res.data.msg) {
              throw new Error(res.data.msg)
            } else {
              throw new Error('请求异常')
            }
          }
        } else {
          throw new Error('网络错误')
        }
      })
      .catch((error) => {
        this.$toastMessage({message: error.message})
      });
    },
    async getAddress () {
      this.requestRunning = true
      await this.$axios
      .get("https://hometest.bojem.com/api/user.new_user/getDefaultAddress", {
        headers: {'token': this.token},
        params: {
          token: this.token
        }
      })
      .then(res => {
        this.requestRunning = false
        console.log(res)
        if (res.status === 200) {
          if (res.data.code === '0000') {
            let data = res.data.data
            if (data.provinceName) {
              this.name = data.name
              this.tel = data.tel
              this.provinceName = data.provinceName
              this.cityName = data.cityName
              this.districtName = data.districtName
              this.detail = data.detail
              this.isHaveAddress = true
            } else {
              this.isHaveAddress = false
            }
          } else {
            if (res.data.msg) {
              throw new Error(res.data.msg)
            } else {
              throw new Error('请求异常')
            }
          }
        } else {
          throw new Error('网络错误')
        }
      })
      .catch((error) => {
        this.requestRunning = false
        this.$toastMessage({message: error.message})
      });
    },
    buyThis () {
      if (this.name && this.tel && this.provinceName) {
        if (this.running) {
          return
        }
        this.running = true
        this.$axios.get("https://kotest.bojem.com/user/exchangeGoods", {
          params: {
            id: this.id,
            token: this.token,
            user: this.name,
            phone: this.tel,
            address: this.provinceName + this.cityName + this.districtName + this.detail
          }
        })
        .then(res => {
          console.log(res)
          setTimeout(() => {
            this.running = false
          }, 2000)
          if (res.status === 200) {
            if (res.data.code === '0000') {
              this.$toastMessage({message: '兑换成功'})
              setTimeout(() => {
                this.$router.go(-1)
              }, 2000)
            } else {
              if (res.data.msg) {
                throw new Error(res.data.msg)
              } else {
                throw new Error('请求异常')
              }
            }
          } else {
            throw new Error('网络错误')
          }
        })
        .catch((error) => {
          this.running = false
          this.$toastMessage({message: error.message})
        });
      } else {
        this.$toastMessage({message: '请选择收货地址'})
      }
    },
  }
};
</script>
<style lang="stylus" scoped>
  p{
    margin 0
  }
  .orderIndex{
    width 100%
    height calc(100vh - 1.4rem)
    height calc(100vh - 1.4rem - env(safe-area-inset-top))
    height calc(100vh - 1.4rem - constant(safe-area-inset-top))
    background #F5F5F5
    padding-bottom 1.4rem
    padding-top  constant(safe-area-inset-top); /* 兼容 iOS < 11.2 */
    padding-top: env(safe-area-inset-top);
    .titleBar{
      height 0.9rem
      background #ffffff
      border-bottom 1px solid #F5F5F5
      padding 0 0.3rem 0
      padding-top 44px
      padding-top  constant(safe-area-inset-top); /* 兼容 iOS < 11.2 */
      padding-top: env(safe-area-inset-top);
      position relative
      display flex
      justify-content space-between
      align-items center

      .backIcon{
        position absolute
        left 0.3rem
        top calc(50% + 44px / 2)
        top calc(50% + env(safe-area-inset-top) / 2)
        transform translateY(-50%)
        width 0.5rem
        z-index 2
        display flex
        svg{
          width 0.5rem
          height 0.4rem
        }
      }
      .title{
        flex 1
        text-align center
        font-size 0.36rem
        color #000
        user-select:none;
      }
      .rightOption{
        font-size 0.26rem;
        color #999999
      }
    }
    .addressWrap{
      display flex
      justify-content space-between
      align-items center
      padding 0.4rem 0.3rem
      background #fff
      .address{
        flex 1
        font-size 0.3rem
        color #000
        margin-left 0.24rem

        ._placeholder{
          color #959595
        }
        .addressDetail{
          width 4.8rem
          .user{
            display flex
            align-items center
            margin-bottom 0.1rem
            p{
              font-size 0.34rem
              color #383838
            }
            span{
              font-size 0.28rem
              color  #999999
              margin-left 0.2rem
            }
          }
          .add{
            p{
              font-size 0.28rem
              color #383838
            }
          }
        }
      }
      .localIcon{
        width 0.34rem 
        height 0.4rem
        background url(../../assets/images/localIcon.png) no-repeat
        background-size contain
      }
      .rightIcon{
        width 0.12rem 
        height 0.22rem
        background url(../../assets/images/rightIcon.png) no-repeat
        background-size cover
      }
    }
    .order{
      margin 0.2rem 0
      background #ffffff

      .orderDetail{
        padding 0.3rem
        border-bottom 0.01rem solid #F5F5F5
        display flex
        align-items center

        .goodsImg{
          width 2rem
          height 2rem

          img{
            width 100%
            height 100%
          }
        }
        .goodsInfo{
          flex 1
          margin-left 0.3rem
          .goodsName{
            font-size 0.3rem
            color #383838
            display -webkit-box
            /* autoprefixer: off */
            -webkit-box-orient vertical
            /* autoprefixer: on */
            -webkit-line-clamp 2
            text-overflow ellipsis
            overflow hidden
          }
          .desc{
            font-size 0.26rem
            color #999999
            margin-top 0.2rem
            line-height 0.36rem
            display -webkit-box
            /* autoprefixer: off */
            -webkit-box-orient vertical
            /* autoprefixer: on */
            -webkit-line-clamp 2
            text-overflow ellipsis
            overflow hidden
          }
        }
      }
      .price{
        height 1rem
        display flex
        justify-content space-between
        padding 0 0.3rem
        line-height 1rem
        ._text{
          font-size 0.28rem
          color #383838
        }
        ._value{
          font-size 0.28rem
          color #7B2C3F
        }
      }
    }
    .bottomBtn{
      position fixed
      bottom 0
      left 0
      right 0
      height 1.4rem
      background #fff
      display flex
      justify-content space-between
      align-items center
      padding 0 0.3rem

      .leftCount{
        font-size 0.28rem
        color #383838
        ._value{
          font-size 0.36rem
          color #7B2C3F
          margin-top 0.1rem
        }
      }
      .rightBtn{
        width 2.5rem
        height 0.8rem
        font-size 0.28rem
        color #ffffff
        text-align center
        line-height 0.8rem
        border-radius 0.4rem
        background: -moz-linear-gradient(left, #A24F63 0%, #7B2C3F 100%)
        background: -webkit-gradient(linear, left left, left right, color-stop(0%,#A24F63), color-stop(100%,#7B2C3F))
        background: -webkit-linear-gradient(left, #A24F63 0%, #7B2C3F 100%)
        background: -o-linear-gradient(left, #A24F63 0%, #7B2C3F 100%)
        background: -ms-linear-gradient(left, #A24F63 0%, #7B2C3F 100%)
        background: linear-gradient(to right, #A24F63 0%, #7B2C3F 100%)
      }
    }
  }
</style>
